<template>
  <div :class="`select-item ${className}${selected ? 'selected':''}`" :style="style" :data-value="value" :data-label="label">
    <slot>{{ label }}</slot>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    label: {
      type: [String, Number],
      required: false,
    },
    /**
     * 当前项是否选中
     */
    selected: {
      type: Boolean,
      default: false,
    },
    /**
     * 自定义样式对象
     */
    style: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 自定义类名，可用于自定义样式
     */
    className: {
      type: String,
      default: '',
    },
  },
};
</script>

<style scoped>
.select-item {
  padding: 10px 10px;
  cursor: pointer;
}
.select-item.selected {
  background-color: rgba(0, 0, 0, 0.2);
}
.select-item:not(:last-child) {
  border-bottom: 1px solid #f8f8f8;
}
.select-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>